<template>
  <div class="welcome-container">
    <!-- 欢迎卡片 -->
    <el-card class="welcome-card" shadow="hover">
      <div class="welcome-header">
        <div class="welcome-info">
          <h2>欢迎回来, {{ userStore.name || '管理员' }}</h2>
          <p>今天是 {{ currentDate }}, {{ weatherInfo }}</p>
        </div>
        <div class="welcome-image">
          <img src="@/assets/doctor.svg" alt="医生形象" />
        </div>
      </div>
    </el-card>

    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="dashboard-row">
      <el-col :span="6" v-for="(item, index) in statistics" :key="index">
        <el-card shadow="hover" class="dashboard-card" :class="item.class">
          <div class="dashboard-card-content">
            <div class="dashboard-card-icon">
              <el-icon><component :is="item.icon" /></el-icon>
            </div>
            <div class="dashboard-card-info">
              <div class="dashboard-card-title">{{ item.title }}</div>
              <div class="dashboard-card-value">{{ item.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷功能区 -->
    <el-card class="quick-access-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>快捷功能</span>
          <el-tooltip content="这里提供常用功能的快速访问入口" placement="top">
            <el-icon><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-row :gutter="20" class="quick-access-row">
        <el-col :span="4" v-for="(item, index) in quickAccess" :key="index">
          <div class="quick-access-item" @click="navigateTo(item.path)">
            <el-icon><component :is="item.icon" /></el-icon>
            <span>{{ item.title }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 健康资讯 -->
    <el-row :gutter="20" class="info-row">
      <el-col :span="16">
        <el-card class="health-news-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>健康资讯</span>
              <el-tag size="small" type="success">最新</el-tag>
            </div>
          </template>
          <div class="news-list">
            <div
              v-for="(news, index) in healthNews"
              :key="index"
              class="news-item"
            >
              <div class="news-title">{{ news.title }}</div>
              <div class="news-date">{{ news.date }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="calendar-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>值班日历</span>
            </div>
          </template>
          <div class="calendar-container">
            <el-calendar v-model="calendarValue">
              <template #date-cell="{ data }">
                <div
                  :class="[
                    'calendar-day',
                    isWeekend(data.day) ? 'is-weekend' : '',
                    isToday(data.day) ? 'is-today' : ''
                  ]"
                >
                  {{ data.day.split('-').slice(2).join('') }}
                </div>
              </template>
            </el-calendar>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
const router = useRouter()
const userStore = useUserStore()
const calendarValue = ref(new Date())

// 当前日期格式化
const currentDate = computed(() => {
  const date = new Date()
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})

// 模拟天气信息
const weatherInfo = ref('晴朗 24°C')

// 统计数据
const statistics = ref([
  {
    title: '在院患者',
    value: '1,286',
    icon: 'UserFilled',
    class: 'patients-card'
  },
  {
    title: '慢性病类型',
    value: '42',
    icon: 'FirstAidKit',
    class: 'diseases-card'
  },
  {
    title: '合作医院',
    value: '23',
    icon: 'OfficeBuilding',
    class: 'hospitals-card'
  },
  {
    title: '本月报销',
    value: '¥923,842',
    icon: 'Wallet',
    class: 'reimbursement-card'
  }
])

// 快捷功能区
const quickAccess = ref([
  { title: '患者管理', icon: 'UserFilled', path: '/home/patient/list' },
  { title: '病种查询', icon: 'FirstAidKit', path: '/home/disease/list' },
  { title: '医院管理', icon: 'OfficeBuilding', path: '/home/hospital/list' },
  { title: '报销记录', icon: 'Wallet', path: '/home/reimbursement/list' },
  { title: '数据统计', icon: 'DataLine', path: '/home/statistics/data' },
  { title: '系统设置', icon: 'SetUp', path: '/setting' }
])

// 健康资讯
const healthNews = ref([
  {
    title: '国家卫健委发布2023年度慢性病防控指南更新版',
    date: '2024-11-12'
  },
  {
    title: '新型心脑血管疾病治疗方案获批上市',
    date: '2024-11-10'
  },
  {
    title: '糖尿病患者的饮食调理：专家指导与建议',
    date: '2024-11-05'
  },
  {
    title: '医保报销新政策解读：慢性病患者可享受更多福利',
    date: '2024-11-01'
  },
  {
    title: '秋冬季节慢性病患者健康指南',
    date: '2024-10-28'
  }
])

// 页面跳转
const navigateTo = (path) => {
  router.push(path)
}

// 判断是否为周末
const isWeekend = (dateString) => {
  const date = new Date(dateString)
  const day = date.getDay()
  return day === 0 || day === 6 // 0是周日，6是周六
}

// 判断是否为今天
const isToday = (dateString) => {
  const today = new Date()
  const date = new Date(dateString)
  return date.toDateString() === today.toDateString()
}

onMounted(() => {
  // 这里可以添加实际的API调用，获取真实数据
  console.log('首页组件加载完成')
})
</script>

<style lang="scss" scoped>
.welcome-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border-color: #3c9474;

  .welcome-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .welcome-info {
      h2 {
        color: #2c5e43;
        margin-bottom: 10px;
      }

      p {
        color: #5a8575;
        font-size: 16px;
      }
    }

    .welcome-image {
      width: 120px;

      img {
        width: 100%;
      }
    }
  }
}

.dashboard-row {
  margin-bottom: 20px;
}

.dashboard-card {
  height: 100px;
  border-radius: 8px;

  &.patients-card {
    background: linear-gradient(to right, #4c9173, #2c5e43);
  }

  &.diseases-card {
    background: linear-gradient(to right, #3a7d64, #205b43);
  }

  &.hospitals-card {
    background: linear-gradient(to right, #29644c, #154e37);
  }

  &.reimbursement-card {
    background: linear-gradient(to right, #3c9474, #2c7155);
  }

  .dashboard-card-content {
    display: flex;
    align-items: center;
    color: white;

    .dashboard-card-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;

      .el-icon {
        font-size: 30px;
      }
    }

    .dashboard-card-info {
      .dashboard-card-title {
        font-size: 14px;
        margin-bottom: 5px;
      }

      .dashboard-card-value {
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
}

.quick-access-card {
  margin-bottom: 20px;
  border-radius: 8px;

  .card-header {
    display: flex;
    align-items: center;

    span {
      font-weight: bold;
      color: #2c5e43;
    }

    .el-icon {
      margin-left: 10px;
      color: #4c9173;
      cursor: pointer;
    }
  }
}

.quick-access-row {
  margin-top: 10px;
}

.quick-access-item {
  height: 100px;
  background-color: #f1f7f4;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background-color: #dbeae3;
    transform: translateY(-5px);
  }

  .el-icon {
    font-size: 30px;
    color: #2c5e43;
    margin-bottom: 10px;
  }

  span {
    color: #2c5e43;
    font-size: 14px;
  }
}

.info-row {
  margin-bottom: 20px;
}

.health-news-card,
.calendar-card {
  height: 400px;
  border-radius: 8px;

  .card-header {
    display: flex;
    align-items: center;

    span {
      font-weight: bold;
      color: #2c5e43;
      margin-right: 10px;
    }
  }
}

.news-list {
  .news-item {
    padding: 15px 0;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:last-child {
      border-bottom: none;
    }

    .news-title {
      color: #303133;
      font-size: 14px;
      flex: 1;

      &:hover {
        color: #2c5e43;
        cursor: pointer;
      }
    }

    .news-date {
      color: #909399;
      font-size: 12px;
      width: 100px;
      text-align: right;
    }
  }
}

.calendar-container {
  height: 100%;

  :deep(.el-calendar) {
    --el-calendar-header-text-color: #2c5e43;
    --el-calendar-selected-bg-color: #3c9474;

    .el-calendar__header {
      border-bottom: 1px solid #ebeef5;
    }

    .el-calendar-day {
      height: 40px;
      text-align: center;
      padding: 5px;
    }

    .calendar-day {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;

      &.is-weekend {
        color: var(--el-text-color-secondary);
      }

      &.is-today {
        background-color: var(--primary-dark);
        color: white;
        font-weight: bold;
      }

      &:not(.is-weekend):not(.is-today) {
        background-color: var(--primary-light);
      }
    }
  }
}
</style>
